<template>
    <div>
        <v-layout>
      <v-flex>
         <v-layout row justify-center class="heander">
           <v-flex sm10 lg7 xl8>
             <v-tabs class="tabs">
             <v-tab
             v-for="n in itemss"
             :key="n.title"
             :to=n.to
             >
             {{n.title}}</v-tab>
             </v-tabs>
             <v-autocomplete
      :loading="loading"
      :items="items"
      :search-input.sync="search"
      v-model="select"
      cache-items
      class="mx-3"
      chips
      dense
      flat
      hide-no-data
      hide-details
      label="输入影片名字"
      solo-inverted
    ></v-autocomplete>
           </v-flex>
         </v-layout>
      </v-flex>
    </v-layout>
    </div>
</template>

<script>
export default {
    name:"Index",
    data(){
      return{
         itemss:[
            {title:"首页",to:"/"},
            {title:"电影",to:"/movie"},
            {title:"电视剧",to:"/tv"}
               ],
        loading: false,
        items: [],
        search: null,
        select: null,
        states: [
          'Alabama',
          'Alaska',
          'American Samoa',
          'Arizona',
          'Arkansas',
          'California',
          'Colorado',
          'Connecticut',
          'Delaware',
          'District of Columbia',
          'Federated States of Micronesia',
          'Florida',
          'Georgia',
          'Guam',
          'Hawaii',
          'Idaho',
          'Illinois',
          'Indiana',
          'Iowa',
          'Kansas',
          'Kentucky',
          'Louisiana',
          'Maine',
          'Marshall Islands',
          'Maryland',
          'Massachusetts',
          'Michigan',
          'Minnesota',
          'Mississippi',
          'Missouri',
          'Montana',
          'Nebraska',
          'Nevada',
          'New Hampshire',
          'New Jersey',
          'New Mexico',
          'New York',
          'North Carolina',
          'North Dakota',
          'Northern Mariana Islands',
          'Ohio',
          'Oklahoma',
          'Oregon',
          'Palau',
          'Pennsylvania',
          'Puerto Rico',
          'Rhode Island',
          'South Carolina',
          'South Dakota',
          'Tennessee',
          'Texas',
          'Utah',
          'Vermont',
          'Virgin Island',
          'Virginia',
          'Washington',
          'West Virginia',
          'Wisconsin',
          'Wyoming'
        ]
      }
    },
    watch: {
      search (val) {
        val && val !== this.select && this.querySelections(val)
      }
    },
    methods: {
      querySelections (v) {
        this.loading = true
        // Simulated ajax query
        setTimeout(() => {
          this.items = this.states.filter(e => {
            return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
          })
          this.loading = false
        }, 500)
      }
    }
}
</script>

<style  scoped>
.heander{
  background-color:#fff;
}
.mx-3{
  width: 30%;
  float: right;
}
.tabs{
  float: left;
}
</style>

